<script setup>
import { useRouter } from 'vue-router';
import { reactive, ref, toRef, onMounted, computed, onUnmounted, nextTick } from 'vue';
import { getDeviceTreeList, getDeviceList } from '#/api/daping/airport'
import { ElCascader, ElMessage, ElTreeSelect, ElTooltip, ElTree, ElTag } from 'element-plus';
import { CircleCloseFilled } from '@element-plus/icons-vue'
const props = defineProps({ deviceList: Array, quickNavList: Array, loading: Boolean, videoList: Array, viewNum: Number, viewIndex: Number });
const emit = defineEmits(['update:viewNum', 'update:videoList', 'update:viewIndex']);
const getImageUrl = (name) => {
  return new URL(`../../../../../assets/${name}`, import.meta.url).href
}
const router = useRouter();
const to_info = (item) => {
  // router.push({
  //   name: 'AirportdeploymentDetail',
  //   query: { id: item.id },
  // });
};
const set_device_list_switch = (list) => {
  let arr = [];
  for (let i in list) {
    let d = list[i]
    d.switch = true
    arr.push(d)
  }
  return arr;
}
const set_switch = (i) => {
  device_list.value[i].switch = !device_list.value[i].switch
}
const device_list = toRef(props.deviceList)
const airport_list_loading = toRef(props.loading)
const treeList_loading = ref(true)
const treeList = ref([])
const get_list = async () => {
  try {
    treeList_loading.value = true;
    const { data } = await getDeviceTreeList({});
    treeList_loading.value = false;
    treeList.value = data
  } catch (err) {
    ElMessage.error('加载数据失败');
  }
}

const deviceList_loading = ref(false)
const get_deviceList = async () => {
  try {
    deviceList_loading.value = true;
    let str = '';
    let arr = []
    if (treeListvalue.value.length > 0) {
      for (let i of treeListvalue.value) {
        arr.push(i.id)
      }
      str = arr.toString()
    }
    const { data } = await getDeviceList({ "ids": str });
    deviceList_loading.value = false;
    device_list.value = set_device_list_switch(data);
  } catch (err) {
    ElMessage.error('加载数据失败');
  }
}

onMounted(() => {
  get_list();
})

const view_num = toRef(props.viewNum);
const video_list = toRef(props.videoList);
const change_num = (num) => {
  const newLength = Math.max(0, Math.floor(num));
  view_num.value = newLength;
  const diff = newLength - video_list.value.length;
  if (diff > 0) {
    video_list.value.push(...Array(diff).fill({}));
  } else if (diff < 0) {
    // 判断前面对象为空并且后面超出部分有值则往前放
    const validData = video_list.value.slice(newLength).filter(item => Object.keys(item).length > 0);
    if (validData.length > 0) {
      let validIndex = 0;
      for (let i = 0; i < video_list.value.length && validIndex < validData.length; i++) {
        if (Object.keys(video_list.value[i]).length === 0) {
          video_list.value[i] = validData[validIndex];
          validIndex++;
        }
      }
    }
    video_list.value.splice(newLength);
  }
  // 触发更新事件
  emit('update:viewNum', view_num.value);
  emit('update:videoList', video_list.value);
};
const up_content = ref(false);
const up_content_f = () => {
  up_content.value = !up_content.value
}

const img_list = reactive([
  { id: 1 },
  { id: 4, },
  { id: 6, },
  { id: 9, },
  { id: 16, },
  { id: 25, },
  { id: 36, },
])

const treeProps = ref({
  label: 'organizationName',
  value: 'id'
})
const treeListvalue = ref([])
const clear_treeListvalue = () => {
  treeListvalue.value = [];
  treeRef.value.setCheckedNodes(treeListvalue.value);
}
const search_list = () => {
  if (deviceList_loading.value) return
  get_deviceList();
}

const get_arr_item = (arr, item, itemName = 'videoUrl') => {
  // 确保输入有效，防止 arr 或 item 为 null/undefined
  if (!Array.isArray(arr) || !item || typeof item[itemName] === 'undefined') {
    return -1;
  }
  // 使用 findIndex 查找匹配项的索引
  return arr.findIndex(element => {
    // 检查 element 是否为有效对象且具有 itemName 属性
    return element && typeof element[itemName] !== 'undefined' && element[itemName] === item[itemName];
  });
};
const get_arr_item_img = (device) => {
  return video_list.value?.some(
    (item) => item?.id === device?.id && item?.type === device?.type
  ) ?? false;
};


const toggleDevice = (device) => {
  // if (device.status != 1) return
  if (!device || typeof device.videoUrl === 'undefined' || !Array.isArray(video_list.value)) {
    return;
  }
  const index = video_list.value.findIndex(
    // item => item && typeof item.videoUrl !== 'undefined' && item.videoUrl === device.videoUrl
    item => item.id == device.id && item.type == device.type
  );
  if (index !== -1) {
    video_list.value.splice(index, 1, {});
  } else {
    const emptyIndex = video_list.value.findIndex(
      item => !item || typeof item.videoUrl === 'undefined'
    );
    if (emptyIndex !== -1) {
      video_list.value.splice(emptyIndex, 1, device);
    } else {
      ElMessage({
        message: '无法添加更多画面',
        type: 'warning',
      })
    }
  }
  emit('update:videoList', video_list.value);
};


const view_index = toRef(props.viewIndex);
const mouseenter = (t1) => {
  if (get_arr_item(video_list.value, t1) != -1) {
    view_index.value = get_arr_item(video_list.value, t1)
    emit('update:viewIndex', view_index.value);
  }
}
const mouseleave = () => {
  view_index.value = null
  emit('update:viewIndex', view_index.value);
}


// 动态最大标签数量
const dynamicMaxTags = ref(2); // 默认显示 1 个标签
// tree-select 组件的引用
const treeSelectRef = ref(null);
// 递归查找树节点以获取 label
const findNodeLabel = (data, id) => {
  for (const node of data) {
    if (node.id === id) {
      return node.organizationName;
    }
    if (node.children) {
      const found = findNodeLabel(node.children, id);
      if (found) return found;
    }
  }
  return '';
};
const treeRef = ref(null);
const handleCheckChange = () => {
  treeListvalue.value = treeRef.value.getCheckedNodes();
  if (treeListvalue.value.length < 3) tag_list_show.value = false
  // handleChange();
}
// 处理选择变化，动态调整 max-collapse-tags
const handleChange = () => {
  // await nextTick();
  const selectedLength = treeListvalue.value.length;
  let totalLength = 0;
  const labelLengths = [];

  // 计算总字数和每个标签字数（保持原始顺序）
  for (const value of treeListvalue.value) {
    // const label = findNodeLabel(treeList.value, value) || '';
    const label = value.organizationName;
    const len = label.length;
    totalLength += len;
    labelLengths.push(len);
  }

  if (selectedLength === 0) {
    dynamicMaxTags.value = 0;
  } else if (selectedLength === 1) {
    dynamicMaxTags.value = (labelLengths[0] > 10) ? 1 : selectedLength;
  } else if (totalLength <= 6) {
    dynamicMaxTags.value = selectedLength;
  } else {
    // 新逻辑：基于累积字数计算可显示的最大标签数量
    let cumLength = 0;
    let maxDisplay = 0;
    const maxAllowedCum = 10; // 累积字数阈值
    const maxPossible = Math.min(2, selectedLength); // 最多显示 3 个

    // 按原始顺序累积字数，找到最大 k 个不超阈值
    for (let i = 0; i < maxPossible; i++) {
      cumLength += labelLengths[i];
      if (cumLength <= maxAllowedCum) {
        maxDisplay = i + 1;
      } else {
        break;
      }
    }

    dynamicMaxTags.value = Math.max(1, maxDisplay);
  }
};
// 监听窗口大小变化以重新计算
// onMounted(() => {
//   window.addEventListener('resize', handleChange);
// });
// onUnmounted(() => {
//   window.removeEventListener('resize', handleChange);
// });


const input_tag_list = ref([])
const tag_list = ref([])
const tree_show = ref(false)
const tag_list_show = ref(false)
const tag_list_show_tout = ref(false)
const handleClose = (i) => {
  // console.log(treeListvalue.value.length);
  // let arr = treeListvalue.value
  treeListvalue.value.splice(i, 1)
  if (treeListvalue.value.length < 3) tag_list_show.value = false
  // handleChange()
  // console.log(treeListvalue.value.length);
  setCheckedNodes()
}
const setCheckedNodes = () => {
  treeRef.value.setCheckedNodes(treeListvalue.value)
}
// tag_list_show.value
const tag_list_show_f = () => {
  tag_list_show.value = true;
  if (tag_list_show_tout.value) clearTimeout(tag_list_show_tout.value)
}
const tag_list_show_f2 = () => {
  tag_list_show_tout.value = setTimeout(() => {
    tag_list_show.value = false;
  }, 10);
}
const treeBoxRef = ref(null)
const handleClickOutside = (event) => {
  if (treeBoxRef.value && !treeBoxRef.value.contains(event.target)) {
    tree_show.value = false
  }
}
const mouseEnting = ref(false)
onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script>
<template>
  <div class="airportlist-page">
    <div class="drone-right-up">
      <h3 class="control-management-title" @click="up_content_f">
        <div class="img_box">
          <!-- <img class="img" :src="`../../../../../assets/wrjjk/dp_wrjjk_icon_${view_num}.png`" /> -->
          <span>
            布局
          </span>
        </div>
        <!-- <img class="icon" src="../../../../../assets/wrjjk/dp_wrjjk_icon_sj.png"
          :style="!up_content ? 'transform:rotate(180deg)' : ''" /> -->
        <!-- <img class="icon" :src="getImageUrl(`wrjjk/dp_wrjjk_icon_${view_num}.png`)" /> -->
        <img class="icon" :src="`/static/wrjjk/dp_wrjjk_icon_${view_num}.png`" />
      </h3>
      <div class="drone-right-up-content" :style="up_content ? 'height:0;' : ''">
        <div class="up-content">
          <div class="img_box" v-for="item in img_list" :key="item.id" :class="{ choice: view_num == item.id }"
            @click="change_num(item.id)">
            <img class="img" :src="`/static/wrjjk/dp_wrjjk_icon_${view_num == item.id ? '' : 's'}${item.id}.png`" />
          </div>
        </div>
      </div>
    </div>
    <h3 class="control-title">
      <div class="img_box">
        设备
      </div>
    </h3>
    <div class="device-list-input-box">
      <div style="width: calc(100% - 3.5vh);">
        <!-- <ElTreeSelect :props="treeProps" ref="treeSelectRef" class="ElCascader" v-model="treeListvalue" :data="treeList"
          multiple :render-after-expand="false" show-checkbox check-on-click-node check-strictly default-expand-all
          :max-collapse-tags="dynamicMaxTags" collapse-tags collapse-tags-tooltip value-key="id" node-key="id"
          @change="handleChange" @node-click="handleChange" clearable /> -->
        <div class="inupt_box">
          <div class="input" @click.stop="tree_show = true" @mouseenter="mouseEnting = true"
            @mouseleave="mouseEnting = false">
            <div class="input_tag_box" v-show="treeListvalue.length > 0">
              <div class="input_tag" v-for="(item, index) in dynamicMaxTags" :key="index">
                <ElTag closable @close="handleClose(index)" v-if="treeListvalue[index]">
                  <!-- {{ index }} -->
                  <ElTooltip class="box-item" effect="dark" :disabled="treeListvalue[index].organizationName.length < 4"
                    placement="top" :hide-after="0">
                    <template #content>
                      <div style="width: 10vw;">{{ treeListvalue[index].organizationName }}</div>
                    </template>
                    {{ treeListvalue[index].organizationName }}
                  </ElTooltip>
                </ElTag>
              </div>
              <div class="more_tag_box" v-show="treeListvalue.length - dynamicMaxTags > 0" @mouseenter="tag_list_show_f"
                @mouseleave="tag_list_show_f2">
                <ElTag>
                  +{{ treeListvalue.length - dynamicMaxTags }}
                </ElTag>
              </div>
            </div>
            <div class="input_text" v-show="treeListvalue.length == 0">请选择组织</div>
            <div class="icon_box" v-show="treeListvalue.length == 0 || !mouseEnting"
              @click.stop="tree_show = !tree_show">
              <img :style="tree_show ? 'transform:rotate(180deg)' : ''" class="icon"
                src="/static/wrjjk/dp_wrjjk_icon_xl.png">
            </div>
            <div class="icon_box" v-show="treeListvalue.length > 0 && mouseEnting" @click.stop="clear_treeListvalue">
              <CircleCloseFilled class="icon2" />
            </div>
          </div>
          <!-- <div class="tag_list_bg_box" @click="tag_list_show = false" v-show="tag_list_show"></div> -->
          <div class="tree_box" ref="treeBoxRef" v-show="tree_show">
            <ElTree v-model="treeListvalue" ref="treeRef" :data="treeList" :render-after-expand="false"
              :expand-on-click-node="false" show-checkbox check-on-click-node check-strictly default-expand-all
              node-key="id" :props="treeProps" @check-change="handleCheckChange" @getCheckedNodes="handleCheckChange" />
          </div>
          <div class="tag_list_box" v-show="tag_list_show" @mouseenter="tag_list_show_f" @mouseleave="tag_list_show_f2">
            <div class="tag_box" v-for="(tag, i) in treeListvalue" :key="tag">
              <ElTag closable @close="handleClose(i)">
                <!-- {{ tag.organizationName }} -->
                <ElTooltip class="box-item" effect="dark" :disabled="tag.organizationName.length < 4" placement="top"
                  :hide-after="0">
                  <template #content>
                    <div style="width: 10vw;">{{ tag.organizationName }}</div>
                  </template>
                  {{ tag.organizationName }}
                </ElTooltip>
              </ElTag>
            </div>
          </div>
        </div>
      </div>
      <div style="width: 2.5vh;cursor: pointer;" @click="search_list">
        <Search style="width: 1.5vh;" />
      </div>
    </div>
    <div class="device-list-box" v-loading="airport_list_loading" element-loading-background="#02272b"
      :style="up_content ? 'height:calc(100% - 12vh)' : 'height:calc(100% - 16.8vh)'">
      <div class="device-list-item" v-for="(item, index) in device_list" :key="index" @click="to_info(item)">
        <div class="device-list-item-title" @click="set_switch(index)">
          <div class="icon">
            <img :style="!item.switch ? 'transform:rotate(180deg)' : ''" class="icon_img"
              src="/static/wrjjk/dp_wrjjk_icon_sj2.png">
          </div>
          {{ item.organizationName }}
        </div>
        <div class="device-list-item-content" :style="!item.switch ? 'height:0' : ''">
          <div v-for="(t, i) in item.deviceGroups" :key="i" class="xh1">
            <div v-for="(t1, i1) in t.deviceItems" :key="i1" class="xh2" @mouseenter="mouseenter(t1)"
              @mouseleave="mouseleave">
              <div class="left_box">
                <ElTooltip class="box-item" effect="dark" :content="t1.status == 1 ? '在线' : '离线'" placement="top"
                  :hide-after="0">
                  <div class="status" :class="{ online: t1.status == 1 }">
                  </div>
                </ElTooltip>
                <img class="img"
                  :src="t1.type == 1 ? '/static/wrjjk/dp_wrjjk_icon_jc.png' : '/static/wrjjk/dp_wrjjk_icon_wrj.png'">
                <div class="text">
                  <ElTooltip class="box-item" effect="dark" :disabled="t1.name.length < 10" placement="top"
                    :hide-after="0">
                    <template #content>
                      <div style="width: 10vw;">{{ t1.name }}</div>
                    </template>
                    <div class="text">
                      {{ t1.name }}
                    </div>
                  </ElTooltip>
                </div>
              </div>
              <div class="right_box" @click="toggleDevice(t1)">
                <img class="img2" :src="`/static/wrjjk/dp_wrjjk_icon_choice${get_arr_item_img(t1) ? '' : '_no'}.png`">
              </div>
            </div>
            <!-- <ElTooltip placement="top" :content="item.organizationName" effect="light"> -->
            <!-- </ElTooltip> -->
          </div>
        </div>
      </div>
      <div v-if="device_list.length == 0"
        style="display: flex;align-items: center;justify-content: center;height: 100%;">
        暂无数据</div>
    </div>
  </div>
</template>
<style lang="scss">
.el-select__popper.el-popper {
  background: #00444A;
}

.el-select__popper.el-popper,
.el-select__popper.el-popper .el-popper__arrow:before {
  border-color: #095d65;
}

.el-popper.is-light,
.el-popper.is-light>.el-popper__arrow:before {
  background: #00444A;
  border-color: #095d65;
}

.el-scrollbar__wrap {
  width: 13vw;
}

.el-popper {
  color: #FFFFFF;

  .el-select__selection {
    width: 10vw;
    overflow: auto;

    .el-select__placeholder,
    .el-select__tags-text {
      white-space: normal;
      word-break: break-all;
      max-width: 5vw;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .el-select__popper.el-popper .el-popper__arrow:before {
    border-color: #095d65;
  }

  .el-tree {
    background: #00444A;


    .el-tree-node>.el-tree-node__children {
      overflow: visible;
    }

    .el-tree-node__expand-icon {
      color: #FFFFFF;
    }

    .el-select-dropdown__item {
      color: #FFFFFF;
      overflow: visible;
    }

    .el-select-dropdown__item.is-selected {
      color: #ffffff;
    }

    .el-tree-node__content:hover {
      background-color: #006069;
    }

    .el-tree-node:focus>.el-tree-node__content {
      background-color: #006069;
    }
  }

  .el-tag {
    background-color: #06656d;
    color: #ffffff;
    height: auto;
  }

  .el-select-dropdown.is-multiple .el-select-dropdown__item.is-selected:after {
    display: none;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: rgb(0 107 230 / 20%);
    border-color: rgb(0 107 230 / 20%);
  }

  .el-checkbox__inner {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
  }
}
</style>
<style lang="scss" scoped>
.airportlist-page {
  width: 100%;
  height: 100%;
  // background-color: rgb(2 19 20 / 58.8%);
  // padding-top: 5vh;

  // overflow-y: auto;
  .drone-right-up {
    // width: 30vw;
    width: 100%;

    .control-management-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 3vh;
      margin: 0;
      font-size: 1.3vh;
      font-weight: 500;
      font-style: normal;
      color: #fffefe;
      user-select: none;
      background: radial-gradient(ellipse 140% 300% at 100% 50%,
          rgba(0, 21, 21, 0.284) 28%,
          rgba(7, 217, 221, 0.7) 100%);
      cursor: pointer;

      .img_box {
        display: flex;
        align-items: center;
        margin-left: 1vh;

        .img {
          width: 2vh;
          height: 2vh;
          margin-right: 1vh;
        }
      }


      .icon {
        width: 1.2vh;
        margin-right: 1vw;
      }
    }

    .drone-right-up-content {
      height: 4.8vh;
      // background:
      //   radial-gradient(ellipse 130% 200% at -10% 50%, #034248 28%, transparent 100%),
      //   radial-gradient(ellipse 130% 200% at 110% 50%, #022326 28%, #00b8bb 100%);
      background-color: #01373C;
      overflow: hidden;
      transition: height 0.3s ease-out;
      margin-bottom: 1vh;

      .up-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1vh;
        height: 4.8vh;

        .img_box {
          width: 2.8vh;
          height: 2.8vh;
          display: flex;
          align-items: center;
          position: relative;
          align-items: center;
          justify-content: center;
          border: 0.1vh solid #678487;
          cursor: pointer;

          .img {
            width: 2vh;
            height: 2vh;
            -webkit-user-drag: none;
          }
        }

      }
    }
  }

  .control-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3vh;
    margin: 0;
    font-size: 1.3vh;
    font-weight: 500;
    color: #fffefe;
    user-select: none;
    background: radial-gradient(ellipse 140% 300% at 100% 50%,
        rgba(0, 21, 21, 0.284) 28%,
        rgba(7, 217, 221, 0.7) 100%);
    padding-left: 1vh;
  }

  .device-list-input-box {
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: space-between;

    :deep(.el-select__wrapper) {
      background-color: #01373c;
      box-shadow: 0 0 0 0;
    }

    :deep(.el-select__placeholder.is-transparent) {
      color: #7D9496;
    }

    :deep(.el-select__selection .el-tag) {
      background-color: #00444A;
      color: #ffffff;
    }

    .inupt_box {
      width: 100%;
      position: relative;

      :deep(.el-tag) {
        background-color: #06656d;
        border-color: #06656d;
        color: #ffffff;
      }

      :deep(.el-tag .el-tag__close) {
        color: #FFFFFF;
      }

      :deep(.el-tag__content) {
        max-width: 3vw;
        font-size: 1.3vh;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .input {
        width: 100%;
        background-color: #01373c;
        border: 0.1vh solid #005659;
        border-radius: 0.2vh;
        padding: 0.5vh;
        padding-right: 0;
        display: flex;
        align-items: center;
        height: 3.5vh;
        position: relative;
        cursor: pointer;

        .input_tag_box {
          width: calc(100% - 2vh);
          height: 3.5vh;
          display: flex;
          align-items: center;

          .input_tag {
            height: 100%;
            display: flex;
            align-items: center;
            margin-right: 0.5vh;
          }
        }

        .input_text {
          color: #98AAAC;
          height: 100%;
          display: flex;
          align-items: center;
          font-size: 1.5vh;
        }

        .icon_box {
          position: absolute;
          right: 0;
          top: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
          width: 2vh;

          .icon {
            width: 1vh;
            user-select: none;
            -webkit-user-drag: none;
          }

          .icon2 {
            width: 1.6vh;
            color: #d0d0d0;
          }
        }

      }

      ::-webkit-scrollbar {
        width: 0.6vh;
        height: 0.6vh;
      }

      .tree_box {
        position: absolute;
        top: 3.8vh;
        width: calc(100%);
        max-height: 40vh;
        padding: 0.5vh;
        background-color: #00444A;
        overflow: auto;
        z-index: 1;



        :deep(.el-tree) {
          background-color: #00444A;
        }

        :deep(.el-tree-node>.el-tree-node__children) {
          overflow: visible;
        }

        :deep(.el-tree-node__content):hover {
          background-color: #006069;
        }

        :deep(.el-tree-node__expand-icon) {
          color: #FFFFFF;
        }

        :deep(.el-select-dropdown__item) {
          color: #FFFFFF;
          overflow: visible;
        }

        :deep(.el-text) {
          color: #ffffff;
        }

        :deep(.el-text.is-truncated) {
          display: inline-block;
          max-width: 100%;
          overflow: visible;
          text-overflow: clip;
          white-space: nowrap;
        }

        :deep(.el-select-dropdown__item.is-selected) {
          color: #ffffff;
        }

        :deep(.el-tree-node:focus>.el-tree-node__content) {
          background-color: #006069;
        }

        :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
          background-color: rgb(0 107 230 / 20%);
          border-color: rgb(0 107 230 / 20%);
        }

        :deep(.el-checkbox__inner) {
          background-color: rgba(255, 255, 255, 0.2);
          border-color: rgba(255, 255, 255, 0.2);
        }
      }



      // .tag_list_bg_box {
      //   position: fixed;
      //   top: 0;
      //   right: 0;
      //   bottom: 0;
      //   left: 0;
      //   pointer-events: none;
      // }

      .tag_list_box {
        position: absolute;
        z-index: 10;
        top: 0;
        width: calc(100%);
        max-height: 40vh;
        padding: 0.5vh;
        background-color: #00444A;
        overflow: auto;
        display: flex;
        align-content: flex-start;
        flex-wrap: wrap;

        .tag_box {
          margin: 0.25vh;
        }
      }
    }

  }

  .device-list-box {
    overflow-y: auto;
    user-select: none;
    background-color: #01373C;
    transition: height 0.3s ease-out;

    .device-list-item {
      cursor: pointer;
      transition: all 0.6s ease-out;

      .device-list-item-title {
        padding: 1vh;
        padding-bottom: 0;
        display: flex;
        align-items: center;


        .icon {
          width: 2vh;

          .icon_img {
            width: 1.2vh;
          }
        }
      }

      .device-list-item-content {
        transition: height 0.6s ease-out;
        overflow: hidden;

        .xh1 {
          background-color: #00444A;
          margin: 1vh;
          border-radius: 0.2vh;
          padding: 1vh;

          .xh2 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1vh;

            .left_box {
              width: calc(100% - 1.8vh);
              display: flex;
              align-items: center;

              .status {
                width: 0.6vh;
                height: 0.6vh;
                background-color: #E80603;
                border-radius: 1vh;
              }

              .online {
                background-color: #00FF42;

              }

              .img {
                width: 2vh;
                height: 2vh;
                margin: 0 0.5vh;
              }

              .text {
                width: 10vw;
                font-size: 1.5vh;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }

            .right_box {
              width: 1.8vh;

              .img2 {
                width: 100%;
              }
            }
          }

          .xh2:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
</style>
